<template>
    <div class="outline">
        <ul class="list">
            <li>
                <!-- <div class="img">
                    <img :src="lukouImg" alt="" />
                </div> -->
                <div class="info">
                    <div>干线路口数</div>
                    <div class="detail">
                        <span class="value">266</span>
                        <span class="unit">个</span>
                    </div>
                </div>
            </li>
            <li>
                <!-- <div class="img">
                    <img :src="lvdengImg" alt="" />
                </div> -->
                <div class="info">
                    <div>绿灯率</div>
                    <div class="detail">
                        <span class="value">80</span>
                        <span class="unit">%</span>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</template>

<style lang="scss" scoped>
.outline {
    ul.list {
        display: flex;
        align-items: center;
        justify-content: center;

        li {
            flex: 1;
            list-style: none;
            // .img {
            //     width: 90px;
            //     img {
            //         width: 100%;
            //     }
            // }
            .info {
                background: url(@/assets/city-road/lukou.webp) no-repeat -10px -40px /
                    auto 150px;

                > div {
                    flex: 1;
                    text-align: center;
                    margin-left: 20px;
                    padding-left: 40px;
                    background: linear-gradient(
                        90deg,
                        rgba(15, 178, 255, 0) 0%,
                        rgba(29, 189, 254, 0.14) 15%,
                        rgba(64, 217, 251, 0.48) 50%,
                        rgba(64, 217, 251, 0) 100%
                    );
                }
                > div + div {
                    margin-top: 6px;
                }
                .detail {
                    font-family: CustomFont;
                    color: #0fb2ff;

                    .value {
                        font-size: 36px;
                        line-height: 47px;
                    }
                    .unit {
                        margin-left: 2px;
                        font-size: 16px;
                        line-height: 21px;
                    }
                }
            }
            &:nth-child(2) {
                .info {
                    background: url(@/assets/city-road/lvdeng.webp) no-repeat -10px -40px /
                        auto 150px;
                    > div {
                        background: linear-gradient(
                            90deg,
                            linear-gradient(
                                90deg,
                                rgba(0, 222, 184, 0) 0%,
                                rgba(0, 234, 221, 0.6) 49%,
                                rgba(0, 222, 184, 0) 100%
                            )
                        );
                    }
                    .detail {
                        color: #4affc0;
                    }
                }
            }
        }
        li + li {
            margin-left: 20px;
        }
    }
}
</style>
